/**
 * Vue遍历中key的作用
 * 1. 虚拟DOM中key的作用:
 * key是虚拟DOM对象的标识,当状态中的数据发生改变时,VUe会根据新数据生成新的虚拟dom,
 * 随后VUe会进行新虚拟dom和旧虚拟dom的差异比较,对比规则为:
 * - 旧虚拟dom中找到了与新虚拟dom中相同的key
 *    - 若虚拟DOM中内容没有改变,直接使用之前的虚拟dom
 *    - 如内容发生改变,则生成新的虚拟dom,随后替换掉页面中之前的真实dom
 * - 旧虚拟dom中没有找到与新虚拟dom中相同的key
 *   - 创建新的真实dom,随后渲染到页面
 * 2. 使用index作为key可能引发的问题
 *    - 若对数据进行逆序添加,逆序删除等破坏顺序操作时,会产生没有必要的真实dom更新,界面显示没有问题,但效率更低
 *    - 如果结构中包含输入类dom,会产生错误dom更新,导致界面出现问题
 * 3. 开发中如何选择key
 *  - 最好每条数据的唯一标识符key,比如id,手机号等
 *  - 如果不存在数据的逆序添加,删除等破坏顺序操作,仅用于渲染,则使用index是没有问题的
 */
// 阻止Vue在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
	el: "#root",// 用于指定当前Vue实例在为哪个容器服务,通常为css选择器 也可以写为 document.getElementById("root")
	data: {// data用于存储数据,数据供el指定的容器使用,
		students: [
			{id: 1, name: "张三"},
			{id: 2, name: "李四"},
			{id: 3, name: "王五"},
			{id: 4, name: "薛六"},
		],
	},
	methods: {
		add() {
			let one = {id: 5, name: "红菇"};
			this.students.unshift(one);
		}
	}
});
